<template>
    <div style="height: 90%">
        <el-row style="height: 50%;margin-top: 10px">
            <el-row style="margin-bottom: 10px" type="flex" justify="center">
                <el-button type="primary" circle>郑</el-button>
            </el-row>
            <el-row type="flex" justify="center">
                <span style="font-size: 14px;font-weight: bold">王岚</span>
                <i class="el-icon-info" style="color: #409EFF"></i>
            </el-row>
            <el-row class="notify-row" type="flex" justify="center">
                <el-button type="primary" plain size="mini">在读学员</el-button>
                <el-button type="primary" plain size="mini">教室通知</el-button>
            </el-row>
            <el-row type="flex" justify="start">
                <el-col :span="18" :offset="3" class="class-tel">
                    <i class="el-icon-info" style="color: #409EFF"></i>
                    <span class="class-tel-desc">13111111111</span>
                </el-col>
            </el-row>
            <el-row type="flex" justify="start">
                <el-col class="class-tel" :span="18" :offset="3">
                    <i class="el-icon-info" style="color: #409EFF"></i>
                    <span class="class-tel-desc">2018-05-11</span>
                </el-col>
            </el-row>
            <el-row style="margin-top: 10px" type="flex" justify="center">
                <el-button class="buy-class" type="primary" size="mini">购买课程</el-button>
            </el-row>
        </el-row>
        <el-row style="height: 50%;">
            <el-row>
                <el-col :offset="3">
                    <span class="class-title">所在班级</span>
                </el-col>
            </el-row>
            <div class="class-list">
                <el-scrollbar :native="false" wrapStyle="" wrapClass="" viewClass="" viewStyle="" noresize="false"
                              tag="section">
                    <ul>
                        <li v-for="(item, index) in 200" :key="index">
                            <el-row type="flex" justify="center">
                                <el-col span="4">
                                    <el-tag :type="index%2==0? 'primary':'danger'" class="">在读</el-tag>
                                </el-col>
                                <el-col :span="10">
                                    <div class="class-item-title">三年级一班</div>
                                    <div class="class-item-subject">英语</div>
                                </el-col>
                            </el-row>
                        </li>
                    </ul>
                </el-scrollbar>
            </div>
        </el-row>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../../components/headTop'
    import {userList} from '@/api/getData'
    import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        name: 'userDetailPanel',
        props: {},
        data() {
            return {
                childForm: {}
            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,

        },
        computed: {},
        created() {
        },
        mounted() {

        },
        methods: {},
    }
</script>
<style lang="less" scoped>
    @import '../../style/mixin';

    .el-table .sks {
        background: #c2e7b0;
    }

    .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .class-title {
        font-size: 10px;
        font-weight: bold;
    }

    .class-tel {
        margin-top: 10px;
        border-bottom: 1px solid lightgrey;
    }

    .notify-row {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .class-list {
        height: 200px;
    }

    .class-item-title {
        color: #409EFF;
        font-size: 12px;
    }

    .class-tel-desc {
        font-size: 12px;
        color: #8c939d;
    }

    .class-item-subject {
        color: #bbbbbb;
        font-size: 12px;

    }

    .buy-class {
        width: 70%;
    }

    .el-tag {
        padding: 3px !important;
        font-size: 8px !important;
        height: auto !important;
        line-height: 100% !important;
    }


</style>
